<template>
<!--  <div class="row justify-center container-row">-->
  <div class="container" ref="el">
    <div class="row-padding justify-center container-xxl container-row">
    <div class="wrapper">
      <div class="col-2 logo item item2">
          <q-img
              class="logo-image"
              src="@/assets/images/A-PLUS-MAX-LOGO_NO_SPACE.png"
              fit="contain"
              style="display: block; margin: 0;width: 132px"
              @click="$router.push('/pc/pcHome')"
          />

      </div>
<!--      <div class="overlay" @click="hideOverlay"></div>-->
      <div class="col-4 item item4">
        <q-input
            ref="inputRef"
            v-model="search"
            rounded
            outlined
            placeholder="Search for..."
            color="black"
            @keyup.enter="handleSearch"
        >
        <template v-slot:prepend>
          <q-icon
              :name="biSearch"
              color="black"
              class="search-icon"
          @click="handleSearch"
          />
        </template>
        </q-input>

        <div style="display: flex;">
          <button class="btn1 right-button" @click="Account">
            <q-icon class="hover-white" :name="biPerson" color="black" size="1.5rem"/>
            <span>Account</span>
          </button>
          <button class="btn2 left-button" @mousemove="changeStrat(true)" @mouseleave="changeStrat(false)" @click="Collect">
            <q-icon class="hover-fill" :name="start? biStarFill:biStar" color="white" size="1.5rem"/>
            <span style="color: white">Favorites</span>
          </button>
          <button class="btn2 left-button" @mousemove="changeHistory(true)" @mouseleave="changeHistory(false)" v-if="userstore.userInfo.token">
            <q-icon class="hover-fill" :name="history? biClipboard2Fill:biClipboard2" color="white" size="1.5rem"/>
            <span style="color: white">Order</span>
          </button>
        </div>

      </div>

    </div>
  </div>
  </div>
</template>

<script lang="ts" setup>
import { biSearch, biPerson, biCart, biStar, biStarFill, biClipboard2Fill, biClipboard2} from '@quasar/extras/bootstrap-icons'
import {computed, ref} from "vue"
import {myCollect, userInfo} from "../../api/userApi";
import { userStore } from '@/store/user.ts';
import {useRouter} from "vue-router";
import {Notify} from "quasar";
const router = useRouter()

const inputRef = ref(null);
const userstore = userStore()
// input输入
const search = ref(null)
const start = ref(false)
const history = ref(false)
const changeStrat = (payload: boolean) => {
  start.value = payload
}

const changeHistory = (payload: boolean) => {
  history.value = payload
}


// 判断点击
// const handleClickOutside = (event) => {
//   // 获取输入框的DOM元素
//   const inputElement = inputRef.value.$el || inputRef.value; // 在 Quasar 中，可能需要使用 $el
//   // 如果点击事件发生在 input 之外，隐藏遮罩
//   if (inputElement && !inputElement.contains(event.target)) {
//     hideOverlay();
//   }
// }
//
// onMounted(() => {
//   // 在整个页面上监听点击事件，用于处理点击input之外的区域隐藏遮罩
//   document.addEventListener('click', handleClickOutside);
// })
//
// onUnmounted(() => {
//   // 在组件销毁前移除事件监听器
//   document.removeEventListener('click', handleClickOutside);
// })

const Account = () => {
  console.log(userstore.userInfo.token)
  if (userstore.userInfo.token && userstore.userInfo.token != "") {
    userInfo().then((res) => {
      router.push("/pc/Account")
    }).catch((err) => {
      router.push("/pc/Login")
    });
  }else{
    router.push("/pc/Login")
  }
}

const Collect = () => {
  if (userstore.userInfo.token && userstore.userInfo.token != "") {
    router.push("/pc/MyCollect")
  }else{
    Notify.create({
      type: 'negative',
      message: "请登录查看",
      position: "top"
    })
  }
}

// 搜索处理函数
const handleSearch = () => {
  const searchTerm = search.value.trim();
  if (search.value.trim()) {
    window.open("#/pc/AllProducts?search=" + searchTerm)
    // router.push({
    //   path: "/pc/AllProducts",
    //   query: {
    //     search: searchTerm,
    //   }
    // });
    search.value = null
  }
};

// 如果需要清空搜索
const clearSearch = () => {
  search.value = '';
  inputRef.value.focus(); // 清空后重新聚焦输入框
};
</script>

<style lang="less" scoped>
/* 鼠标悬浮时的手型指针和颜色变化 */
.search-icon {
  cursor: pointer;
  transition: color 0.3s ease;
}

.search-icon:hover {
  color: @xtxColor !important; /* 使用Quasar主色或自定义颜色 */
  transform: scale(1.05);    /* 可选：添加轻微放大效果 */
}

/* 如果需要整个输入框在聚焦时改变样式 */
.q-field--outlined:hover .q-field__control:before {
  border-color: @xtxColor !important;
}
.container{
  border-bottom: 1px solid #d9d9d9;
}
.wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center; /* 垂直居中 */
  //padding: 0 50px 0 50px;
}
.img-wrapper{
  padding-right: 160px;
}
.item {
  flex: 1;
  text-align: center;
  color: #fff;
  //padding: 20px;
  border-radius: 5px;

}
//.item2 {
//  flex: 3; /* 第一个元素占2个等分 */
//}
:deep(.q-field__control){
  padding: 0 20px;
}
//.item4 {
//  flex: 6; /* 第二个元素占4个等分 */
//  padding-right: 10px;
//}
.item4{
  flex: 6;
  display: grid;
  grid-template-columns: 1fr auto auto;
  .q-input{
    font-size: 20px;
    margin-right: 5%;
  }
  .right-button {
    &:hover{
      background-color: #151515;
      color: white;
      border: 2px solid #151515;
      .text-black{
        color: white !important;
      }
    }
    font-weight: 800;
    padding-right: 30px;
    padding-left: 10px;
    justify-self: end; /* 将右按钮右对齐 */
    cursor: pointer;
    min-width: 120px;
    width: 80%;
    display: grid;
    grid-template-columns: 1fr 2fr; /* 将容器平分为三列，第二列宽度是第一列宽度的两倍 */
    gap: 5px; /* 列之间的间隔，根据需要调整 */
    align-items: center; /* 垂直居中对齐 */
    justify-items: center; /* 水平居中对齐 */
    span{
      font-size: 16px;
    }
  }
  .left-button{
    margin-left: 10px;
    font-weight: 800;
    padding-right: 20px;
    padding-left: 15px;
    justify-self: end; /* 将右按钮右对齐 */
    cursor: pointer;
    min-width: 140px;
    width: 80%;
    display: grid;
    grid-template-columns: 1fr 2fr; /* 将容器平分为三列，第二列宽度是第一列宽度的两倍 */
    gap: 5px; /* 列之间的间隔，根据需要调整 */
    align-items: center; /* 垂直居中对齐 */
    justify-items: center; /* 水平居中对齐 */
    span{
      font-size: 16px;
    }
  }
  .right-button{
    &:hover{
      background-color: black;
      color: white;
      .text-black{
        color: white !important;
      }
    }
  }
  .left-button{
    background-color: black;
  }
}


:deep(input::placeholder) {
  font-size: 17px; /* 你可以根据需要调整字体大小 */
  vertical-align: middle; /* 垂直居中 */
}
:deep(input:focus::placeholder) {
  color: #000000;
}
:deep(input:hover::placeholder) {
  color: #000000;
}

.btn1{
  width: 80%;
  height: 56px;
  border-radius: 30px; /* 设置按钮圆角 */
  background-color: #ffffff; /* 设置背景颜色 */
  border: 2px solid #717171;
}
.btn2{
  width: 80%;
  height: 56px;
  border-radius: 30px; /* 设置按钮圆角 */
  background-color: #ffffff; /* 设置背景颜色 */
  border: 2px solid #000000;
}
.row-padding{
  padding: 50px 50px;
}
.q-img:hover{
  cursor: pointer;
}
.logo-image:hover {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: wobble;
}

@keyframes wobble {
  0%,
  100% {
    transform: translateX(0%);
    transform-origin: 50% 50%;
  }

  15% {
    transform: translateX(-28px) rotate(-6deg);
  }

  30% {
    transform: translateX(14px) rotate(6deg);
  }

  45% {
    transform: translateX(-16px) rotate(-3.6deg);
  }

  60% {
    transform: translateX(10px) rotate(2.4deg);
  }

  75% {
    transform: translateX(-8px) rotate(-1.2deg);
  }
}
</style>